<template>
  <div>

    <div :class="['hexagon-card', typeClass]">
    <div class="hexagon-content">
      <div class="hex-top">{{ displayType }}</div>
      <div class="hex-bottom">
        <slot />
      </div>
    </div>
  </div>
  </div>

</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) => ['pending', 'processing', 'completed', 'overdue'].includes(value)
  }
});

// 显示的中文标签
const displayType = computed(() => {
  const types = {
    pending: '待进行',
    processing: '进行中',
    completed: '已完成',
    overdue: '已超期'
  };
  return types[props.type];
});

// 对应的样式类名
const typeClass = computed(() => {
  const classes = {
    pending: 'pending',
    processing: 'processing',
    completed: 'completed',
    overdue: 'overdue'
  };
  return classes[props.type];
});
</script>

<style scoped>
.hexagon-card {
  position: relative;
  width: 6vw;
  height: 5.1vw;
  margin: 1vw;
  /* 旋转60度 */
  transform: rotate(30deg);
  background: #3d2020;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  /* padding: 10px; */
  box-sizing: border-box;
}

.hexagon-content {
  text-align: center;
  transform: rotate(-30deg);
}

.hex-top {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 16px;
}

.hex-bottom {
  font-size: 16px;
}

/* pending: 'pending',
    processing: 'processing',
    completed: 'completed',
    overdue: 'overdue' */
.pending {
  background: #67fdff;
}
.processing {
  background: #67ff77;
}
.completed {
  background: #fff067;
}
.overdue {
  background: #ff2f02;
}
</style>
